<template>
	<view class="flex-col page">
		<u-navbar :is-back="false" title="充值中心" title-color="#1f1f1f" back-icon-color="#1f1f1f"
			:background="background"></u-navbar>
		<!-- <view class="" @click="getuserinfo">
			登录{{level !== 0}}--1
		</view> -->
		<!-- <view class="">
			{{uid}}--uid
		</view> -->
		<view class="flex-col group">
			<view class="flex-col">
				<view class="flex-col section_2">
					<view class="flex-col">
						<view class="flex-row justify-between items-center self-stretch group_2">
							<view class="flex-row items-center">
								<image class="shrink-0 image_3"
									src="https://terminator.axu9.com/images/jh-mobile-icon.png" />
								<input type="text" @blur="mobileBlur" v-model="mobile" placeholder="请输入手机号"
									placeholder-class="font_2 text_3" class="ml-14-5" />
							</view>
							<text @click="getName" class="font text_2">查询</text>
						</view>
						<view class="self-center divider"></view>
					</view>
					<view class="mt-24 flex-col">
						<view class="flex-row items-center self-stretch group_3">
							<image class="image_4" src="https://terminator.axu9.com/images/jh-shop-icon.png" />

							<input type="text" v-model="purchaserValue" placeholder="商家名称" disabled
								placeholder-class="font_2 " class="font_22 ml-15-5" />
						</view>
						<view class="self-center divider"></view>
					</view>
				</view>
				<!-- 购买卡密 -->
				<view class="" v-if="level == 2 || level == 3">
					<view class="flex-row items-center group_4">
						<view class="section_3"></view>
						<text class="font_3 ml-9-5">购买卡密</text>
					</view>
					<view class="flex-col section_4">
						<view class="recharge-con">
							<view class="recharge-con-top">
								<view class="recharge-con-title flex-row items-center justify-center">
									<image class="recharge-icon"
										src="https://terminator.axu9.com/images/membership-recharge-icon2.png" mode="">
									</image>
									<text>购买卡密</text>
									<text class="card-price-text">价格￥{{cardPrice}}</text>
								</view>
								<view class="flex-row justify-center">
									<numberBox :purchaser="purchaserValue" ref="cardNum" @change="cardNumChange">
									</numberBox>
								</view>
							</view>
							<view class="recharge-con-btm flex-row justify-center items-end">
								<text class="recharge-con-btm-text">价格</text>
								<text class="recharge-con-btm-unit">￥</text>
								<view class="flex-row items-end">
									<text class="recharge-con-btm-price">{{cardMoneyTotal}}</text>
								</view>

							</view>
						</view>
					</view>
				</view>
				<!-- 购买音色 -->
				<view class="" v-if="level !== 0">
					<view class="flex-row items-center group_4">
						<view class="section_3"></view>
						<text class="font_3 ml-9-5">购买音色</text>
					</view>
					<view class="flex-col section_4">
						<view class="recharge-con">
							<view class="recharge-con-top">
								<view class="recharge-con-title flex-row items-center justify-center">
									<image class="recharge-icon"
										src="https://terminator.axu9.com/images/membership-recharge-icon2.png" mode="">
									</image>
									<text>购买音色</text>
								</view>
								<view class="flex-row justify-center">
									<numberBox :purchaser="purchaserValue" ref="timbreNum" @change="timbreNumChange">
									</numberBox>
								</view>
							</view>
							<view class="recharge-con-btm flex-row justify-center items-end">
								<text class="recharge-con-btm-text">价格</text>
								<text class="recharge-con-btm-unit">￥</text>
								<view class="flex-row items-end">
									<text class="recharge-con-btm-price">{{timbreMoneyTotal}}</text>
								</view>

							</view>
						</view>
					</view>
				</view>
				<!-- 购买算力 -->
				<view class="" v-if="level !== 0">
					<view class="flex-row items-center group_4">
						<view class="section_3"></view>
						<text class="font_3 ml-9-5">购买算力</text>
					</view>
					<view class="flex-col section_4">
						<view class="recharge-con">
							<view class="recharge-con-top1 flex-row item-center justify-center">
								<view class="recharge-con-title1 flex-row items-center justify-center">
									<image class="recharge-icon"
										src="https://terminator.axu9.com/images/membership-recharge-icon2.png" mode="">
									</image>
									<text class="suanli-title">算力</text>
									<text class="suanli-total">{{storeSuanliNumTotal}}</text>
								</view>
								<view class="flex-row items-center">
									<numberBox :purchaser="purchaserValue" ref="suanliNum" @change="suanliNumChange"
										:width="'60'"></numberBox>
								</view>

							</view>
							<view class="recharge-con-btm flex-row justify-center items-end">
								<text class="recharge-con-btm-text">价格</text>
								<text class="recharge-con-btm-unit">￥</text>
								<view class="flex-row items-end">
									<text class="recharge-con-btm-price">{{suanliMoneyTotal}}</text>
									<text class="youhui-text">(优惠{{youhuiMoney}}元)</text>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="page-bottom flex-col items-center">
			<view v-if="!isLoading" class="bottom-btn" @click="payMent">
				同意协议并支付￥{{money}}元
			</view>
			<view v-if="isLoading" class="bottom-btn">
				同意协议并支付￥{{money}}元
			</view>
			<view class="agreement flex-row items-center">
				<image @click="selectAgree" v-if="isCheched" class="select-icon"
					src="https://terminator.axu9.com/images/membership-checked.png" mode=""></image>
				<image @click="selectAgree" v-if="!isCheched" class="select-icon"
					src="https://terminator.axu9.com/images/membership-unchecked.png" mode=""></image>
				<text class="agreement-text1">已阅读并同意</text>
				<text @click="toAgreement" class="agreement-text2">《{{AgreeTitle}}》</text>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getPackage,
		getUsername,
		activationBusiness,
		buyHuiyuan,
		kamiPrice,
		createCardOrder,
		createOrder,
		H5Query,
		gzhPayCardOrder,
		gzhPaySuanTOrder
	} from "@/api/user.js"
	import {
		getAgreement
	} from "@/api/video.js"
	import numberBox from "../../components/numBox/index.vue";
	import {
		Weixin
	} from '@/utils/pay.js'
	export default {
		components: {
			numberBox
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				mobile: '', //手机号
				purchaserValue: '', //商家名称

				jhUid: '', //激活的uid
				type: 1, //1添积分 2激活卡
				rechargeMoney: 0,
				youhuiMoney: 0, //购买算力优惠金额
				// disabledMobile: false,//电话是否禁用
				isLoading: false, //防止重复点击
				storeSuanliNum: 0, //一份算力值
				storeSuanliPrice: 0, //一份算力价格
				storeYinsePrice: 0, //一份音色价格
				storeSuanliNumTotal: 0, //总算力
				money: 0, //支付金额
				isCheched: false, //是否勾选协议
				AgreeTitle: '', //协议标题
				level: '', //身份 0普通用户 1激活用户 2银牌 3金牌
				cardPrice: 0, //卡密价格
				cardMoneyTotal: 0, //卡密总计金额
				timbreMoneyTotal: 0, //音色总计金额
				suanliMoneyTotal: 0, //算力总计金额
				timbrenum: 0, //音色份
				cardnum: 0, //卡密张数
				suanlinum: 0, //算力份数
				// jhUid: '',
				uid: uni.getStorageSync("uid"),
				gzhAppid: 'wxa91301f663568d84', //公众号appid
			}
		},
		onLoad() {
			this.getBuyHuiyuan();
			this.getXieyi();

			if (!uni.getStorageSync('uid')) {
				this.getuserinfo();
			}
			// this.getUser();
			// let link = window.location.href;

			// console.log(link.split("code="),'kkkkkkkkkkkkkkkkkkkkk')
			// let temp = link.split("code=")[1];
			// console.log(temp,'jajajajajajja')
			// if (temp != undefined) {
			// 	this.getuserinfo();
			// }

		},
		// onShareAppMessage: function (res) {},//分享好友
		// onShareTimeline(){},//分享朋友圈
		methods: {
			
			// 购买卡密 创建订单
			createCardOrder() {
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				this.isLoading = true;
				createCardOrder({
					uid: this.jhUid,
					num: this.cardnum,
					price: this.money,
					type: 3,
					pay_type: 2, //公众号2
				}).then(res => {
					if (res.errno == 0) {
						this.payCard(res.data)
					} else {
						uni.hideLoading();
						this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			payCard(orderId) {
				gzhPayCardOrder({
					uid: this.jhUid,
					order_id: orderId,
					gzh_uid: uni.getStorageSync("uid")
				}).then(res => {
					if (res.errno == 0) {
						console.log(res, '获取支付信息')
						this.wechatPay(res.data.payInfo)
					} else {
						uni.hideLoading();
						this.isLoading = false;
					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
				})
			},
			wechatPay(info) {
				console.log(info, 'jjdjdjdjdjdjdj')
				let _this = this
				// var uid = uni.getStorageSync('uid')
				var wxJS = new Weixin();

				// var payconfig = JSON.parse(res.data.config);
				// wxJS.init(payconfig);
				wxJS.init({
					appId: _this.gzhAppid,
					timestamp: info.timestamp,
					nonceStr: info.nonceStr,
					signature: info.paySign
				});
				wxJS.pay({
						timestamp: info.timestamp,
						nonceStr: info.nonceStr,
						package: info.package,
						signType: info.signType,
						paySign: info.paySign
					},
					res => {
						console.log('ye成功', res)
						if (res.errMsg == 'chooseWXPay:ok') {
							uni.hideLoading();
							_this.isLoading = false;
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								duration: 1000
							});
							_this.mobile = '';
							_this.purchaserValue = '';
							_this.jhUid = 0;
							_this.level = '';
							_this.$refs.suanliNum.clear();
							_this.suanliMoneyTotal = 0;
							_this.storeSuanliNumTotal = 0;
							_this.$refs.timbreNum.clear();
							_this.timbreMoneyTotal = 0;
							_this.money = 0;
							_this.youhuiMoney = 0;
							if(_this.$refs.cardNum){
								_this.$refs.cardNum.clear();
							}
							console.log('支付成功')
						}else if(res.errMsg == 'chooseWXPay:cancel'){
							uni.hideLoading();
							_this.isLoading = false;
							uni.showToast({
								title: '取消支付',
								icon: 'none',
								duration: 1000
							});
							
						} else {
							uni.hideLoading();
							_this.isLoading = false;
							uni.showToast({
								title: res.errMsg,
								icon: 'none',
								duration: 1000
							});
						}
					}
				);
				


			},
			getuserinfo() {
				//获取当前页面的url
				let link = window.location.href;

				let code = null;
				// 判断link中有没有code=字符串，  
				if (link.indexOf('code=') == -1) {
					console.log('1111111')
					//没有code= 发请求
					let appid = this.gzhAppid;
					let uri = encodeURIComponent(link);

					let authURL =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
					window.location.href = authURL;
				} else {
					console.log('22222')
					//回调函数已经执行 返回的链接存在code= 地址解析
					let temp = link.split("code=")[1];
					code = temp.split("&")[0];

					//存储code
					uni.setStorageSync('code', code);
					//对后台发送请求传参code获取token和用户信息
					let _this = this
					H5Query({
						code: code
					}).then(res => {
						console.log(res, 'H5Query')
						if (res.errno == 0) {
							uni.setStorageSync('uid', res.data);

						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg,
							})
						}
					})

				}
			},
			// 获取微信支付信息
			gzhPaySuanTOrder(orderId) {
				gzhPaySuanTOrder({
					gzh_uid: uni.getStorageSync("uid"),
					order_id: orderId,
					uid: this.jhUid
				}).then(res => {

					if (res.errno == 0) {
						console.log(res, '获取支付信息')
						this.wechatPay(res.data.payInfo)
					} else {
						uni.hideLoading();
						this.isLoading = false;
					}
				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
				})
			},

			// 创建算力/音色订单
			createSuanTOrder(type, num) {
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '创建订单中'
				})
				this.isLoading = true;

				createOrder({
					uid: this.jhUid,
					type: '1', //类型 1充值 2套餐
					c_type: type, //充值类型 1买音色 2买算力
					c_num: num, //充值数量
					price: this.money, //支付金额
					t_type: '3', //套餐类型 1月 2季 3年
					pay_type: 2
				}).then(res => {
					console.log(res, 'createOrder')

					if (res.errno == 0) {
						// uni.showToast({
						// 	title: '成功',
						// 	icon: 'none'
						// })
						var orderId = res.data;
						this.gzhPaySuanTOrder(orderId);
					} else {
						uni.hideLoading();
						this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}


				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			// 支付
			payMent() {
				if (!this.isCheched) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					})
					return
				}
				if (this.money == 0) {
					uni.showToast({
						title: '支付金额不正确',
						icon: 'none'
					})
					return
				}
				if (this.mobile == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				if (this.suanliMoneyTotal != 0) {
					console.log('购买算力')
					this.createSuanTOrder(2, this.suanlinum)
				}
				if (this.timbreMoneyTotal != 0) {
					console.log('购买音色')
					this.createSuanTOrder(1, this.timbrenum)
				}
				if (this.cardMoneyTotal != 0) {
					console.log('购买卡密')
					this.createCardOrder();
				}
			},
			selectAgree() {
				this.isCheched = !this.isCheched
			},
			// 卡密张数改变
			cardNumChange(e) {
				this.$refs.suanliNum.clear();
				this.$refs.timbreNum.clear();
				this.suanliMoneyTotal = 0;
				this.storeSuanliNumTotal = 0;
				this.timbreMoneyTotal = 0;
				this.youhuiMoney = 0;
				this.money = 0;
				let num = e;
				this.cardnum = num;
				this.cardMoneyTotal = num * this.cardPrice;
				this.money = num * this.cardPrice;
			},
			// 音色数量改变
			timbreNumChange(e) {
				this.$refs.suanliNum.clear();
				if (this.level == 2 || this.level == 3) {
					this.$refs.cardNum.clear();
				}
				this.suanliMoneyTotal = 0;
				this.storeSuanliNumTotal = 0;
				this.cardMoneyTotal = 0;
				this.youhuiMoney = 0;

				this.money = 0;
				// this.$refs.timbreNum.clear();
				let num = e;
				this.timbrenum = num;
				this.timbreMoneyTotal = num * this.storeYinsePrice;
				this.money = num * this.storeYinsePrice;
			},
			// 算力份数改变
			suanliNumChange(e) {
				let num = e;
				this.suanlinum = num;
				// this.rechargeNum = num;
				console.log(num, this.level, 'rechargeNumChange1')
				// this.$refs.suanliNum.clear();
				if (this.level == 2 || this.level == 3) {
					this.$refs.cardNum.clear();
				}
				this.$refs.timbreNum.clear();
				this.timbreMoneyTotal = 0;
				this.cardMoneyTotal = 0;
				if (this.level == 1) {
					this.suanliMoneyTotal = this.storeSuanliPrice * num;
					this.money = this.storeSuanliPrice * num;
				} else if (this.level == 2) {
					this.suanliMoneyTotal = Math.floor(this.storeSuanliPrice * num * 0.9);
					this.money = Math.floor(this.storeSuanliPrice * num * 0.9);
					this.youhuiMoney = Math.floor(this.storeSuanliPrice * num * 0.1);
				} else if (this.level == 3) {
					this.suanliMoneyTotal = Math.floor(this.storeSuanliPrice * num * 0.8);
					this.money = Math.floor(this.storeSuanliPrice * num * 0.8);
					this.youhuiMoney = Math.floor(this.storeSuanliPrice * num * 0.2);
				}
				this.storeSuanliNumTotal = this.storeSuanliNum * num;
			},
			// 跳转到协议
			toAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=3'
				})
			},
			// 开通会员协议
			getXieyi() {
				getAgreement({
					id: 3
				}).then(res => {
					if (res.errno == 0) {
						this.AgreeTitle = res.data.title;
					}
				})
			},
			// 获取卡密价格
			getCardPrice(uid) {
				kamiPrice({
					uid: uid
				}).then(res => {
					console.log(res.data, '获取卡密价格')
					if (res.errno == 0) {
						this.cardPrice = Number(res.data)
					}
				})
			},
			// 获取会员配置信息
			getBuyHuiyuan() {
				buyHuiyuan().then(res => {
					console.log(res, 'ffffff');
					if (res.errno == 0) {
						let info = res.data;
						this.storeSuanliNum = info.store_suanli_num;
						this.storeSuanliPrice = info.store_suanli_price;
						this.storeYinsePrice = info.store_yinse_price;
					}
				})
			},
			// 积分输入框失焦
			integralBlur(e) {
				console.log(e.detail.value, 'blur')
				let value = e.detail.value
				if (value != '') {
					this.current = -1;
				}
			},
			// 手机号查询名称
			getName() {
				if (this.mobile == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				this.searchPurcher();
				
			},
			// 查询手机号--接口
			searchPurcher(){
				uni.showLoading({
					title:'查询中'
				})
				getUsername({
					mobile: this.mobile
				}).then(res => {
					uni.hideLoading();
					console.log(res, 'getUsername')
					if (res.errno == 0) {
						this.purchaserValue = res.data.nickName;
						this.jhUid = res.data.id;
						this.level = res.data.level_id;
						// this.$refs.suanliNum.clear();
						this.suanliMoneyTotal = 0;
						this.storeSuanliNumTotal = 0;
						// this.$refs.timbreNum.clear();
						this.timbreMoneyTotal = 0;
						this.money = 0;
						this.youhuiMoney = 0;
						if(this.$refs.suanliNum){
							this.$refs.suanliNum.clear();
						}
						if(this.$refs.timbreNum){
							this.$refs.timbreNum.clear();
						}
						if (this.level == 2 || this.level == 3) {
							this.getCardPrice(res.data.id)
							console.log(this.$refs.cardNum, 'this.$refs.cardNum')
							// this.$refs.cardNum.clear();
				
							setTimeout(() => {
				
								this.$refs.cardNum.clear();
								this.cardMoneyTotal = 0;
								console.log(this.$refs.cardNum, 'this.$refs.cardNum1111111')
							}, 500)
						}
				
					} else {
						setTimeout(()=>{
							this.purchaserValue = '';
							this.jhUid = 0;
							this.level = '';
							this.$refs.suanliNum.clear();
							this.suanliMoneyTotal = 0;
							this.storeSuanliNumTotal = 0;
							this.$refs.timbreNum.clear();
							this.timbreMoneyTotal = 0;
							this.money = 0;
							this.youhuiMoney = 0;
						},500)
						
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 查询手机号 失焦事件
			mobileBlur(e){
				console.log(e.detail.value,'手机号 失焦事件')
				if (e.detail.value == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return
				}
				this.searchPurcher();
			},
			// 获取代理商套餐积分
			getTaocan() {
				getPackage().then(res => {
					console.log(res, 'ffffff');
					if (res.errno == 0) {
						let info = res.data;
						this.taocanList[0].price = info.yue;
						this.taocanList[1].price = info.ji;
						this.taocanList[2].price = info.nian;
					}

				}).catch(err => {

				})
			},
			changeTaocan(index) {
				this.integralValue = ''
				this.current = index;
			},
			
			
			create() {
				this.popupActive = false;
			},
			
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);

	.ml-15-5 {
		margin-left: 31rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-14-5 {
		margin-left: 29rpx;
	}


	page {
		background-size: 100% 433rpx;
		background-image: linear-gradient(181deg, #d6f4ed 0%, #f5f5f4 100%);
		background-repeat: no-repeat;
		background-color: #f5f5f5;
	}


	.group {
		padding: 0 30rpx 260rpx 30rpx;
	}

	.section_2 {
		padding: 60rpx 40rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.group_2 {
		padding-bottom: 29rpx;
	}

	.image_3 {
		width: 30rpx;
		height: 34rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #98a0a9;
	}

	.font_22 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #98a0a9;
		width: 80%;
	}

	.text_3 {
		line-height: 29rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
		font-weight: 500;
		color: #00bf90;
	}

	.text_2 {
		margin-right: 49rpx;
	}

	.divider {
		opacity: 0.2;
		width: 530rpx;
		height: 1rpx;
		background-color: #536074;
	}

	.group_3 {
		padding-bottom: 38rpx;
	}

	.image_4 {
		width: 31rpx;
		height: 31rpx;
	}

	.group_4 {
		padding: 37rpx 0 28rpx;
	}

	.section_3 {
		background-color: #00bf90;
		border-radius: 3rpx;
		width: 6rpx;
		height: 36rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #111111;
	}

	.section_4 {
		background-color: #ffffff;
		border-radius: 12rpx;
	}

	.recharge-con {
		width: 100%;
		height: 255rpx;
		border-radius: 20rpx;
	}

	.recharge-con-top {
		height: calc(100% - 90rpx);
	}

	.recharge-con-top1 {
		height: calc(100% - 90rpx);
		padding-top: 24rpx;
		padding-bottom: 26rpx;
	}


	.recharge-con-btm-text {
		margin-bottom: 10rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
	}

	.recharge-con-btm-unit {
		margin-bottom: 10rpx;
		margin-left: 8rpx;
		margin-right: 8rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
	}

	.recharge-con-btm {
		width: 100%;
		border-radius: 0 0 20rpx 20rpx;
		height: 90rpx;
		background-color: #ebfdf6;
	}

	.recharge-con-btm-price {
		font-weight: 600;
		font-size: 56rpx;
		color: #151515;
	}

	.youhui-text {
		color: #fbc64a;
		font-weight: 500;
		font-size: 24rpx;
		margin-bottom: 10rpx;
	}

	.recharge-con-title {
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
		padding-top: 24rpx;
		padding-bottom: 26rpx;

	}

	.recharge-con-title1 {
		font-weight: 600;
		font-size: 24rpx;
		color: #151515;
		margin-right: 30rpx;

	}


	.recharge-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 6rpx;
	}

	.card-price-text {
		font-weight: 500;
		font-size: 22rpx;
		color: #00BF90;
	}

	.suanli-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #151515;
	}

	.suanli-total {
		font-size: 40rpx;
		font-weight: 600;
		color: #151515;
	}


	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #f5f5f5;
		padding: 20rpx 0 60rpx 0;
		width: 100%;
	}

	.bottom-btn {
		width: 690rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: linear-gradient(-90deg, #00ccbb, #00e586);
		font-weight: 600;
		font-size: 32rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 100rpx;
		margin-bottom: 37rpx;
	}

	.select-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.agreement-text1 {
		color: #999999;
		font-weight: 400;
		font-face: PingFang SC;
		font-size: 24rpx;
	}

	.agreement-text2 {
		color: #00db9c;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 24rpx;
	}
</style>